/* flex 布局组件 */

@mixin flex-layout() {

	.flex, .flex-col, .flex-row, .flex-split {
		display: flex;
		flex-direction: row;

		/* 元素对其方式 */
		&.align-start {
			justify-content: flex-start;
		}

		&.align-center {
			justify-content: center;
		}
	
		&.align-end {
			justify-content: flex-end;
		}

		>*, .flex-item {
			flex: 0 0 auto;

			@for $space from 1 through 8 {
				/* 默认的横向栅格布局 */
				&.flex-#{$space} {
					flex: $space 1 0;
				}
			}
		}

		.flex-main {
			flex: 1;
		}
	}

	.flex-split {
		>*, .flex-item {
			flex: 1;
		}
	}

	.flex-col {
		flex-direction: column;
	}

	.flex-row {
		flex-wrap: nowrap;
		flex-direction: row;
	}

	.flex-inline {
		display: inline-flex;
	}

	/* 空余控件平分 */
	.space-between {
		justify-content: space-between;
	}

	.space-around {
		justify-content: space-around;
	}

	/* 栅格化相关代码 */
	.flex-grid {
		display: flex;

		@for $space from 1 through $flex-grid-default {
			/* 默认的横向栅格布局 */
			>*, .flex-item {
				flex: 1 1 auto;

				&.grid-#{$space} {
					width: percentage($space/$flex-grid-default) !important;
				}
			}
				

			/* 纵向栅格布局 */
			&.flex-col {
				>*, .flex-item {
					flex: 1 1 auto;

					&.grid-#{$space} {
						width: auto !important;		// 恢复默认属性
						flex: $space;
					}
				}
			}
		}
	}
}